// @ts-nocheck
<template>
  <div class="p-4">
    <!--  :showActionButtonGroup="false"   :model="modelBaicRef"-->
    <div class="flex">
      <FormItem label="" name="carrierMid" class="w-50">
        <Select v-model:value="dateValue" @change="selectDate">
          <SelectOption
            placeholder=""
            v-for="item in options"
            :key="item.value"
            :value="item.value"
          >
            <span>{{ item.label }}</span>
            <span v-if="item.label == 'custom'"> </span>
          </SelectOption>
        </Select>

        <!-- <dateSelect /> -->
      </FormItem>
      <div class="ml-4 w-100">
        <BasicForm :schemas="schemas" :showActionButtonGroup="false" @register="registerForm" />
        <!-- <RangePicker v-model:value="RangePickerDate" @change="changeDate" format="YYYY-MM-DD" /> -->
      </div>
    </div>
    <GrowCard
      v-if="showWaitHandleCount"
      :loading="!showWaitHandleCount"
      class="enter-y"
      :growCardList="growCardList"
    />
    <GrowCard
      v-if="showWaitHandleCount"
      :loading="!showWaitHandleCount"
      class="enter-y mt-4"
      :growCardList="growSecondCardList"
    />
    <div class="md:flex enter-y mt-10">
      <!-- 折线图  运单数量 -->
      <SiteAnalysis
        class="enter-y w-5xl"
        v-if="showDeliveryPlan"
        :tabListTitle="tabListPlanTitle"
        :list="listDeliveryPlanData"
        :xyTitle="deliveryPlanTitle"
        :loading="loading"
      />
      <!-- 运输类型饼图 -->
      <VisitSource
        v-if="showTransportType"
        :list="transportType"
        class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full"
        :loading="loading"
      />
    </div>

    <div class="md:flex enter-y mt-10">
      <SiteAnalysis
        class="enter-y w-5xl"
        v-if="showDeliveryCount"
        :tabListTitle="tabListCountTitle"
        :list="listDeliveryCountData"
        :xyTitle="deliveryCountTitle"
        :loading="loading"
      />
      <sideAnalysis
        class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full"
        v-if="showReceiveCityTopType"
        :tabListTitle="tabListCountTitle"
        :list="receiveCityTopType"
        :xyTitle="deliveryCountTitle"
        :loading="loading"
      />
      <!-- <Pie class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" /> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import GrowCard from './components/GrowCard.vue';
  import SiteAnalysis from './components/SiteAnalysis.vue';
  import VisitSource from './components/VisitSource.vue';
  import sideAnalysis from './components/sideAnalysis.vue';
  // import dateSelect from './components/dateSelect.vue';
  import {
    getDeliveryPlan,
    getWaitHandleCount,
    getDeliveryCount,
    getTransportType,
    GetReceiveCityTopType,
  } from '@/api/eslogis-bi/index';
  import { growCardList } from './data';
  import { growSecondCardList } from './second';
  // import dayjs from 'dayjs';
  // import { BasicForm } from '@/components/Form';
  import { BasicForm, FormSchema, useForm } from '@/components/Form';
  // DatePicker RangePicker
  import { FormItem, Select, SelectOption } from 'ant-design-vue';

  const loading = ref(true);
  const showDeliveryPlan = ref(false);
  const showDeliveryCount = ref(false);
  const showTransportType = ref(false);
  const showReceiveCityTopType = ref(false);
  const showWaitHandleCount = ref(false);
  // const RangePickerDate = ref<RangeValue>();
  const dateValue = ref('month');
  const type = ref('month');
  // const dateFormat = 'YYYY/MM/DD';
  // const formState = ref({});
  const listDeliveryPlanData = reactive([]);
  const listDeliveryCountData = reactive([]);
  const transportType = reactive([]);
  const receiveCityTopType = reactive([]);
  const tabListPlanTitle = reactive([
    {
      key: 'tab1',
      tab: '发货计划数&运单数',
    },
  ]);
  const tabListCountTitle = reactive([
    {
      key: 'tab1',
      tab: '发货数量统计',
    },
  ]);

  const deliveryPlanTitle = reactive({
    xName: 'date',
    numberLine: ['planCount', 'shippingCount'],
    chineseName: ['计划数', '运单数'],
  });
  const deliveryCountTitle = reactive({
    xName: 'date',
    numberLine: ['planWeight', 'outboundWeight', 'receiveWeight'],
    chineseName: ['计划量', '出库量', '签收量'],
  });
  const options = reactive([
    // { label: '今天', value: 'today' },
    // { label: '昨天', value: 'yesterday' },
    { label: '本周', value: 'week' },
    // { label: '上周', value: 'lastWeek' },
    { label: '本月', value: 'month' },
    // { label: '上月', value: 'lastMonth' },
    // { label: '本季度', value: 'quarter' },
    // { label: '上季度', value: 'lastQuarter' },
    { label: '本年', value: 'year' },
    // { label: '去年', value: 'lastYear' },
    // { label: '近一年', value: 'recentYear' },
    // { label: '自定义', value: 'custom' },
  ]);
  const schemas: FormSchema[] = [
    {
      field: 'rangeDate',
      component: 'RangePicker',
      label: '自定义日期',
      colProps: {
        span: 24,
      },
      componentProps: {
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
        placeholder: ['开始日期', '结束日期'],
        onChange: (val) => {
          const data_ = {
            startDate: val[0],
            endDate: val[1],
          };
          getIndexData(data_);
        },
      },
    },
  ];
  const [registerForm] = useForm();
  function selectDate(val) {
    if (val == 'custom') {
      // 自定义时，增加时间筛选项
      // formState.value.dateChange = 'custom';
      return;
    }
    type.value = val;

    getIndexData({ type: type.value });
  }
  onMounted(() => {
    getIndexData({ type: type.value });
  });
  function getIndexData(data) {
    showDeliveryPlan.value = false;
    showDeliveryCount.value = false;
    showTransportType.value = false;
    showReceiveCityTopType.value = false;
    getDeliveryPlan(data).then((res) => {
      listDeliveryPlanData.value = res;
      showDeliveryPlan.value = true;
    });
    getWaitHandleCount().then((res) => {
      growCardList[0].value = 800;
      growCardList[1].value = res.dispatchedWaitReview;
      const nameList = [
        'waitDeliveryOrder',
        'dispatchedWaitReview',
        'pricingWaitReview',
        'outboundWaitReview',
      ];
      const nameList2 = [
        'checkBillWaitReview',
        'signWaitReview',
        'signContractWarehouse',
        'signContractTransporter',
      ];
      growCardList.forEach((item, index) => {
        item.value = res[nameList[index]];
      });
      growSecondCardList.forEach((item, index) => {
        item.value = res[nameList2[index]];
      });
      showWaitHandleCount.value = true;
    });
    getDeliveryCount(data).then((res) => {
      listDeliveryCountData.value = res;
      showDeliveryCount.value = true;
    });
    getTransportType(data).then((res) => {
      transportType.value = res;
      showTransportType.value = true;
    });
    GetReceiveCityTopType(data).then((res) => {
      receiveCityTopType.value = res;
      showReceiveCityTopType.value = true;
    });
    setTimeout(() => {
      loading.value = false;
    }, 100);
  }
</script>
